<template>
  <div>
    <div class="tips">余额： {{ (user_info.integral).toFixed(2) }}</div>
    <div class="form">
      <p>提现金额</p>
      <van-cell-group inset>
        <van-field clearable label="￥" placeholder="请输入需要提现的金额" v-model="formData.money" @blur="getScale">
          <template #button>
            <span @click="allUp">全部提现</span>
          </template>
        </van-field>
      </van-cell-group>

    </div>
    <div class="relus">
      <p> 提现手续费：{{ toPercent(wallet_info.withdrawal) ? toPercent(wallet_info.withdrawal) : "0" }}</p>
      <p> 到账金额：{{ formData.rmb }} 元</p>
      <p>提现时间：工作日提现到账时间T+1，节假日提现到账时间顺延至下个工作日</p>
      <p>提现规则：最低提现为{{ wallet_info.minMoney }}元，最高可提现{{ wallet_info.maxMoney }}元</p>
    </div>
    <div class="payForm">
      <p>提现方式</p>
      <van-radio-group v-model="formData.checked" class="radio-warp">
        <van-cell-group inset>
          <van-cell title="提现到支付宝" clickable @click="formData.checked = '1'">
            <template #right-icon>
              <van-radio name="1" />
            </template>
            <template #icon>
              <img src="../../../assets/image/alipay.png" alt="">
            </template>
          </van-cell>
          <van-cell title="提现到微信" clickable @click="formData.checked = '2'" icon="wechat-pay">
            <template #right-icon>
              <van-radio name="2" />
            </template>
            <template #icon>
              <img src="../../../assets/image/weichat.png" alt="">
            </template>
          </van-cell>
          <van-cell title="提现到银行卡" clickable @click="formData.checked = '3'" icon="paid">
            <template #right-icon>
              <van-radio name="3" />
            </template>
            <template #icon>
              <img src="../../../assets/image/bank.png" alt="">
            </template>
          </van-cell>
          <!-- <van-cell title="USDT" clickable @click="formData.checked = '4'" icon="paid">
            <template #right-icon>
              <van-radio name="4" />

            </template>
            <template #icon>
              <img src="../../../assets/image/USDT.png" alt="">
            </template>
          </van-cell> -->
        </van-cell-group>
      </van-radio-group>

    </div>
    <div class="waiting">提现可能会有延迟，请耐心等候</div>
    <van-button type="primary" class="block_gradual" :loading="formData.loading" @click="submit">立即提现</van-button>
  </div>
</template>
<script>
import { computed, ref, reactive, onMounted, nextTick } from 'vue'
import { useStore } from "vuex";
import { useRouter } from "vue-router"
import { appNoticeList, appNoticeInfo, ipage, getwalletInfo, UserAdd, Useripage } from "@/api/public";
import { Dialog, Toast } from "vant";
import { scale, toPercent } from "@/utils/phone";
export default {
  setup(props) {
    const router = useRouter()
    const store = useStore();
    const user_info = computed(() => {
      return store.getters.user_info
    })
    const formData = reactive({
      checked: "1",
      loading: false,
      money: "",
      mini: "",
      type: null
    })
    const allUp = () => {
      formData.money = user_info.value.integral
      getScale()
    }
    const getScale = (e) => {
      let reg = '/(^[1-9]([0-9]*)$|^[0-9]$)/'
      formData.money = e.target.value.replace(/\D/g, '').replace(/^0{1,}/g, '');
      formData.rmb = (formData.money - formData.money * wallet_info.value.withdrawal).toFixed(2)
      // formData.rmb = parseInt(formData.money / scale(wallet_info.value.rmb, 0) - (formData.money * scale(wallet_info.value.rmb, 0) * wallet_info.value.withdrawal)).toFixed(2)
      formData.usdt = parseInt(formData.money / scale(wallet_info.value.usdt, 0) - (formData.money / scale(wallet_info.value.usdt, 0) * wallet_info.value.withdrawal))
    }
    const wallet_info = ref({})
    const submit = () => {

      console.log(formData.checked)
      formData.loading = true
      if (formData.checked === "1") {
        formData.loading = false
        if (!user_info.value.alipayAccount) {
          Toast('请先设置支付宝账户')
          router.push({
            path: "/setPay",
            query: {
              type: '0'
            }
          })
          return false
        }

      } else if (formData.checked === "2") {
        formData.loading = false
        if (!user_info.value.weixinAccount) {
          Toast('请先设置微信收款账户')
          router.push({
            path: "/setPay",
            query: {
              type: '1'
            }
          })
          return false
        }
      } else if (formData.checked === "3") {
        formData.loading = false
        if (!user_info.value.bankAccount && !user_info.value.bankUserName && !user_info.value.bankName) {
          Toast('请先设置收款账户')
          router.push({
            path: "/setPay",
            query: {
              type: '2'
            }

          })
          return false
        }

      }
      if (!formData.money) {
        Toast('请输入金额')
        formData.loading = false
        return false
      }
      userAdd()
    }
    const userAdd = async () => {
      const data = { integral: formData.money, type: formData.checked }
      const res = await UserAdd(data)
      console.log(res)
      if (res.data.success) {
        Toast("操作成功")
        formData.loading = false
      } else {
        formData.loading = false
        // Toast(res.data.message)
      }
    }
    const onLoad = async () => {
      const res = await getwalletInfo()
      wallet_info.value = res.data.data
    }
    onMounted(() => {
      onLoad()
    })
    return {
      formData, submit, user_info, allUp, onLoad, userAdd, wallet_info, toPercent, getScale
    }

  }
}
</script>
<style lang="less" scoped>
.block_gradual {
  margin: 0px 30px 40px;
  margin-left: 30px;
  width: 682px;
  height: 92px;
}

.waiting {
  text-align: center;
  font-size: 26px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #b9c4c7;
  line-height: 48px;
  margin: 40px 0px;
}

.payForm {
  padding: 20px;
  background: #282a2c;
  border: 1px solid #999;
  border-radius: 18px;
  margin: 0px 30px;

  &:deep(.van-cell-group) {
    background: transparent;
  }

  img {
    width: 10%;
    height: 10%;
    vertical-align: middle;
    margin-right: 20px;
  }

  &:deep(.van-cell) {
    padding: 0px;
    display: flex;
    align-items: center;
  }

  &:deep(.van-cell:after) {
    border-bottom: 0px;
  }

  &:deep(.van-cell__title) {
    font-size: 31px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    line-height: 95px;
  }

  p {
    font-size: 30px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    line-height: 48px;
  }

  &:deep(.van-radio__icon--checked > .van-icon) {
    color: #37dc6d !important;
    background: linear-gradient(-90deg, #37dc6d 0%, #34d1f9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  &:deep(.van-cell) {
    background: #282a2c;
  }

  &:deep(.van-radio__icon--checked) {
    color: #37dc6d !important;
  }

  &:deep(.van-icon-success) {
    background: transparent;
    border-color: #37dc6d;
    opacity: 0.8;
  }
}

.tips {
  font-size: 30px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  line-height: 48px;
  padding-left: 30px;
  margin-top: 40px;
}

.relus {
  margin: 40px 30px;
  font-size: 26px;
  font-family: Source Han Sans CN;
  font-weight: 300;
  color: #b9c4c7;
  line-height: 48px;
  opacity: 0.8;
}

.form {
  height: 205px;
  background: #282a2c;
  border: 1px solid #999;
  border-radius: 18px;
  margin: 20px 30px 30px;
  padding: 30px;

  &:deep(.van-field__label) {
    color: #ffffff;
    width: fit-content;
  }

  &:deep(.van-field) {
    border-bottom: 1px solid #999;
    border-radius: 0px;
  }

  p {
    font-size: 30px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    line-height: 48px;
  }

  &:deep(.van-cell-group) {
    background: transparent;
  }
}
</style>